<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电商网站</title>
    <link href="../../styles/website_style.css" rel="stylesheet"/>
    <script src="../../js/jquery.mini.js"></script>
    <link href="../../img/100du.ico" rel="icon">  <!--告诉浏览器显示100的图标-->
    <!--<script src="./../../js/website.js"></script>-->
    <script src="../../js/tween.js"></script>
    <!--条件注释语句-->
    <!--[if IE 6]>
    <script>
/*修复IE6背景图没有灰色背景*/
        DD_belatedPNG.fix("*");
    </script>
    <!endif-->
    <script>
        /*这个函数相当于widow.onload()*/
        /*采用闭包的形式 分成模块  相当于java的函数*/
        $(function () {


            /*搜索切换*/
            (function () {
                var aLi = $("#menu li");
                var oText = $("#search").find(".form .text"); //发现它下面有个class为
                var arrText = [
                    '例如：荷棠鱼坊烧鱼 或 樱花日本料理',
                    '例如：昌平区育新站龙旗广场2号楼609室',
                    '例如：万达影院双人情侣券',
                    '例如：东莞出事了，大老虎是谁？',
                    '例如：北京初春降雪，天气变幻莫测'
                ];
                var iNow = 0;
                ;//默认第一个 JQuery支持链式操作
                oText.val(arrText[iNow]);
                /*因为不知道点位置 所以还需要传递个索引  名字随意取*/
                aLi.each(function (index) {
                    /*一个li的click*/
                    $(this).click(function () {
//                       console.log("当前点击的位置=="+index);
                        aLi.attr("class", "gradient");//所有class都变成默认gradient没有点击的颜色
                        $(this).attr("class", "active");//当前的点击的li变成active颜色
                        iNow = index;
                        oText.val(arrText[iNow]);
                    })
                });
                oText.focus(function () {
//                    console.log("数组里面的东西=="+arrText[iNow]);
                    //当获取光标时 让这个里面的东西清空掉
                    if ($(this).val() == arrText[iNow]) {
                        $(this).val("")
                    }

                });
                //失去光标
                oText.blur(function () {
                    if ($(this).val() == "") {
                        oText.val(arrText[iNow]);  //还原
                    }
                });
            })();

            /*焦点图 文字滚动*/
            (function () {
                var divUpDate = $(".update");
                var oUl = divUpDate.find("ul");

                var arrData = [
                    {'name': '萱萱', 'time': 4, 'title': '那些灿烂华美的瞬间', 'url': 'http://www.miaov.com/2013/'},
                    {'name': '畅畅', 'time': 5, 'title': '广东3天抓获涉黄疑犯', 'url': 'http://www.miaov.com/2013/#curriculum'},
                    {'name': '萱萱', 'time': 6, 'title': '国台办回应王郁琦', 'url': 'http://www.miaov.com/2013/#about'},
                    {'name': '畅畅', 'time': 7, 'title': '那些灿烂华美的瞬间', 'url': 'http://www.miaov.com/2013/#message'},
                    {'name': '萱萱', 'time': 8, 'title': '那些灿烂华美的瞬间', 'url': 'http://www.miaov.com/2013/'},
                    {'name': '畅畅', 'time': 9, 'title': '广东3天抓获涉黄疑犯', 'url': 'http://www.miaov.com/2013/#curriculum'},
                    {'name': '萱萱', 'time': 10, 'title': '国台办回应王郁琦', 'url': 'http://www.miaov.com/2013/#about'},
                    {'name': '畅畅', 'time': 11, 'title': '那些灿烂华美的瞬间', 'url': 'http://www.miaov.com/2013/#message'}
                ];

                var str = "";
                var btnDown = $("#updateDownBtn");
                var btnUp = $("#updateUpBtn");
                var iNow = 0;
                var timer = null;
                for (var i = 0; i < arrData.length; i++) {
                    str += '<li><a href="' + arrData[i].url + '"><strong>' + arrData[i].name + '</strong> <span>' + arrData[i].time + '分钟前</span> 写了一篇新文章：' + arrData[i].title + '…</a></li>';
                }
                oUl.html(str);
                var iH = oUl.find("li").height();
//                console.log("字符串==" + str)
//                console.log("li高度=====" + iH);//如果这里的li高度=0，那么就是ul里面还没有放置li 所以应在放置之后获取li滴高度
                btnUp.click(function () {
                    doMove(-1)
                });


                btnDown.click(function () {
                    doMove(1)
                });
                //当鼠标移到这个区域时停止定时器，移出时自动播放
                divUpDate.hover(function () {
                    clearInterval(timer);
                }, autoPlay);
//                divUpDate.hover(function (){
//                    clearInterval( timer );
//                }, autoPlay());

                function autoPlay() {
                    timer = setInterval(function () {
                        doMove(-1)
                    }, 1000);
                };

                autoPlay();

                function doMove(num) {
                    iNow += num;
                    if (Math.abs(iNow) > arrData.length - 1) {
                        iNow = 0;
                    }
                    if (iNow > 0) {
                        iNow = -(arrData.length - 1);
                    }
                    oUl.stop().animate({"top": iH * iNow}, 2000, "elasticOut");//弹性运动
                }


            })();


            /*Tab切换*/
            //attr 是所有    removeClass 是指定哪个class
            (function () {

                fnTab($(".tabNav1"), $(".tabCon1"));//第一次调用函数

                fnTab($(".tabNav2"), $(".tabCon2"));//第二次调用函数

                function fnTab(oNav, aCon) {
                    var aElem = oNav.children();
                    aCon.hide().eq(0).show();
                    aElem.each(function (index) {
                        $(this).click(function () {
                            aElem.removeClass("active").addClass("gradient");
                            $(this).removeClass("gradient").addClass("active");
                            aElem.find("a").attr("class", "triangle_down_gray");
                            $(this).find("a").attr("class", "triangle_down_red");
                            /*内容部分怎么办  先让所有的隐藏  然后将当前点击滴那个显示*/
                            aCon.hide().eq(index).show();
                        });
                    });
                }
            })();

            /*焦点 轮播图  淡入淡出效果*/
            (function () {
                var oDiv = $("#fade");
                var aUlLi = oDiv.find("ul li");
                var aOlLi = oDiv.find("ol li");
//                 console.log("=="+aOlLi);
//                console.log("==xxx"+aUlLi);
                var oP = oDiv.find("p");
                var arr = ['爸爸去哪儿啦xxxx~', '人像摄影中的光影感', '娇柔妩媚、美艳大方'];
                var iNow = 0;
                var timer = null;

                fnFade();//初始化第一张
                autoPlay();
                aOlLi.click(function () {
                    iNow = $(this).index();
                    fnFade()
                });
                oDiv.hover(function () {
                    clearInterval(timer);

                }, autoPlay);
                function autoPlay() {
                    timer = setInterval(function () {
                        iNow++;
                        iNow %= arr.length;
                        fnFade();
                    }, 2000);
                }

                function fnFade() {
                    aOlLi.each(function (i) {
                        if (i != iNow) {
//                     console.log("===111111===执行")
                            aUlLi.eq(i).fadeOut().css("zIndex", 1);
                            aOlLi.eq(i).removeClass("active");

                        } else {
//                     console.log("===222222===执行")
                            aUlLi.eq(i).fadeIn().css("zIndex", 2);
                            aOlLi.eq(i).addClass("active");
                        }
                    });

                    oP.text(arr[iNow]);
                }

            })();



            //日历提示说明
            (function () {
                var aSpan = $(".calendar h3 span");
                var aImg = $(".calendar .img");
                var oPrompt = $(".today_info");
                var oImg = oPrompt.find("img");
                var oStrong = oPrompt.find("strong");
                var oP = oPrompt.find("p");

                aImg.hover(function () {
                    var  iTop=$(this).parent().position().top-30;
                    var ileft = $(this).parent().position().left+55;
                    var index = $(this).parent().index();//这个是得到li的索引值
                    var number = index%aSpan.size();
//                    console.log("===="+number)
//                    console.log("===="+iTop)
//                   var attr = $(this).attr("info");
                    var attr = $(this).attr("src");//得到图片的属性
//                   console.log("图片的属性=="+attr);
                    oPrompt.show().css({"left":ileft,"top":iTop});
//                    oPrompt.css({"left":ileft,"top":iTop})
                    oP.text($(this).attr("info"));
                    oImg.attr("src",$(this).attr("src"));
//                    oImg.attr("src",$(this).attr("src"));


                    console.log("这是星期=="+aSpan.eq(number).text())
                    console.log("是否为空"+oStrong)
//                   oStrong.text(aSpan.eq(index).text());
                    oStrong.text(""+aSpan.eq(number).text());
                },function () {
                    oPrompt.hide();
                });
                //想办法找到鼠标所移到的li滴位置，距离父亲上边缘和左边缘滴距离

            })();
            /*====================================闭包函数收尾======================================================*/
        });

//        //BBS高亮显示
//        (function () {
//            $(".bbs ol  li").mouseover(function() {
//                console.log("回调======")
//                $(".bbs ol  li").removeClass("active").eq($(this).index()).addClass("active");
////                   $(this).addClass("active");//这样也行
//
//            });
//
//        })();

        // BBS高亮显示
        (function (){

            var bbs = $(".bbs ol li");
            console.log("====xxxxxxx===+BBS高亮显示"+bbs);
            $(".bbs ol li").click(function (){
                console.log("=======+BBS高亮显示")
                $('.bbs ol li').removeClass('active').eq($(this).index()).addClass('active');
            });
        })();
        // 闭包函数形式
        //        $(function () {
        //        });


    </script>
</head>

<body>

<div id="header" class="gradient">
    <!--这里可以用 dl  dt  dt 这样的结构  扩展性强一些  后期可以用span  a   img -->
    <p class="city">
        切换城市：
        <a href="#" class="active">北京</a>
        <a href="#">上海</a>
        <a href="#">福州</a>
        <a href="#">广州</a>
        <a href="#">青岛</a>
    </p>
    <!--这里可以用 ul  li 这样的结构  扩展性强一些  后期可以用span    a    img 等 -->

    <p class="link">
        <a href="#" class="ico1">加盟100度</a> |
        <a href="#" class="ico2">店铺管理</a>
    </p>
</div>

<div class="bar"></div>

<div id="nav">
    <ul class="nav_1">
        <li><a class="bg1" href="#">美食</a></li>
        <li><a class="bg2" href="#">夜店</a></li>
        <li><a class="bg3" href="#">购物</a></li>
        <li><a class="bg4" href="#">文化</a></li>
        <li><a class="bg5" href="#">休闲</a></li>
    </ul>
    <h1><a href="#"><img src="../../img/logo.png" alt="100官方网站"></a></h1> <!--标题权重很重 所以用h1-->
    <ul class="nav_2">
        <li><a class="bg6" href="#">烧客空间</a></li>
        <li><a class="bg7" href="#">知道分子</a></li>
        <li><a class="bg8" href="#">白吃白拿</a></li>
        <li><a class="bg9" href="#">烧客论坛</a></li>
        <li><a class="bg10" href="#">企业俱乐部</a></li>
    </ul>
</div>

<div id="search" class="gradient">
    <div class="bar">
        <!--为了提升性能 单独加ID-->
        <ul class="menu" id="menu">
            <li class="active">搜店</li>
            <li class="gradient">地址</li>
            <li class="gradient">优惠券</li>
            <li class="gradient">全文</li>
            <li class="gradient">视频</li>
        </ul>
    </div>

    <div class="form">
        <form action="#">
            <input class="text" type="text" value="来搜索一波啊">
            <input class=" btn" type="submit" value="">
        </form>
    </div>

    <p class="key_text">
        <a href="#">金钱豹</a>
        <a href="#">大江南</a>
        <a href="#">湘水之珠</a>
        <a href="#">德瑀楼</a>
        <a href="#">荷棠鱼坊烤鱼</a>
        <a href="#">SOHO尚都</a>
        <a href="#">湘味楼</a>...
    </p>
    <div class="img"></div>
    <div class="update">
        <div class="wrap">  <!--这是一个包裹层  这就就可用用overflow：hidden属性将其余两条隐藏起来-->
            <ul>
                <!--用js动态添加-->
                <!--<li><a href="#"><strong>宣宣</strong><span>5分钟前</span> 写了一篇文章，那些灿烂华美的瞬间...</a></li>-->
                <!--<li><a href="#"><strong>嘻嘻</strong><span>7分钟前</span> 写了一篇文章，那些灿烂华美的瞬间...</a></li>-->
            </ul>
        </div>
        <a id="updateUpBtn" href="javascript:;" class="triangle_up"></a>
        <a id="updateDownBtn" href="javascript:;" class="triangle_down_red"></a>
    </div>
</div>


<div class="content clear">
    <div class="main fl">

        <div class="main_wrap clear">
            <!--有浮动的地方父亲级就要清除浮动-->
            <div class="section fl">
                <h2 class="video_title">热门视频<sup style="font-size: 10px ;color: #00a0e9">video</sup></h2>
                <div class="video"><a><img src="../../img/play_bg.gif"></a></div>
                <ul class="video_list">
                    <li><a href="#">现场实录：杭州机场系统崩溃111</a></li>
                    <li><a href="#">现场实录：杭州机场系统崩溃222</a></li>
                    <li><a href="#">现场实录：杭州机场系统崩溃333</a></li>
                </ul>
            </div>


            <div class="options fr">
                <ul class="nav tabNav1">
                    <li class="active fl"><strong>hot <span>红店铺</span></strong>
                        <a href="javascript:;" class="triangle_down_red"></a>
                    </li>  <!--选项卡高亮状态-->
                    <li class="gradient fr"><strong>new <span>新开张</span></strong>
                        <a href="javascript:;" class="triangle_down_gray"></a>
                    </li>
                </ul>
                <div class="con">
                    <div class="hot_list">
                        <ul class="tabCon1">
                            <li>
                                <div class="img "><a href="#"><img src="../../img/content/hot_list_pic1.gif"></a></div>
                                <div class="text ">
                                    <h3><a href="#">红店铺红店铺红店铺红店铺</a></h3>
                                    <p>
                                        区域省：朝阳/CBD<br/>
                                        人均：180元<br/>
                                        人气：12321
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="img "><a href="#"><img src="../../img/content/hot_list_pic1.gif"></a></div>
                                <div class="text">
                                    <h3><a href="#">红店铺红店铺红店铺红店铺</a></h3>
                                    <p>
                                        区域省：朝阳/CBD<br/>
                                        人均：180元<br/>
                                        人气：12321
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img src="../../img/content/hot_list_pic1.gif"></a></div>
                                <div class="text">
                                    <h3><a href="#">红店铺红店铺红店铺红店铺</a></h3>
                                    <p>
                                        区域省：朝阳/CBD<br/>
                                        人均：180元<br/>
                                        人气：12321
                                    </p>
                                </div>
                            </li>

                        </ul>
                        <ul class="tabCon1">
                            <li>
                                <div class="img "><a href="#"><img src="../../img/content/hot_list_pic2.gif"></a></div>
                                <div class="text ">
                                    <h3><a href="#">新开张新开张新开张新开</a></h3>
                                    <p>
                                        区域省：朝阳/CBD<br/>
                                        人均：180元<br/>
                                        人气：12321
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="img "><a href="#"><img src="../../img/content/hot_list_pic2.gif"></a></div>
                                <div class="text">
                                    <h3><a href="#">新开张新开张新开张新开</a></h3>
                                    <p>
                                        区域省：朝阳/CBD<br/>
                                        人均：180元<br/>
                                        人气：12321
                                    </p>
                                </div>
                            </li>
                            <li>
                                <div class="img"><a href="#"><img src="../../img/content/hot_list_pic2.gif"></a></div>
                                <div class="text">
                                    <h3><a href="#">新开张新开张新开张新开</a></h3>
                                    <p>
                                        区域省：朝阳/CBD<br/>
                                        人均：180元<br/>
                                        人气：12321
                                    </p>
                                </div>
                            </li>

                        </ul>
                        <a href="#" title="更多" class="more"><img src="../../img/more.gif" alt="更多"/></a>
                    </div>
                </div>
            </div>
        </div>

        <div class="main_ad"><a href="#"><img src="../../img/ad/ad1.jpg"></a></div>

        <div class="main_wrap clear">
            <!--有浮动的地方父亲级就要清除浮动-->
            <!--<div class="section fl">-->
            <div class="activity">

                <h2 class="new_title">
                    <strong>LUCKY YODAY</strong>
                    <span>每日活动</span>
                    <em>2014.2</em>
                </h2>
                <div class="con">
                    <div class="info">
                        <div class="img"><img src="../../img/content/today1.gif"></div>
                        <div class="text">
                            <h3 class="">
                                <em>02</em>
                                <em>11</em>
                                <span>本日主题</span>
                            </h3>
                            <p> 迟到的荣誉——啦啦啦，现在还写电商网站，呃好吧，没词儿了~~</p>
                        </div>
                    </div>
                    <div class="calendar">
                        <h3>
                            <span>周一</span>
                            <span>周二</span>
                            <span>周三</span>
                            <span>周四</span>
                            <span>周五</span>
                            <span>周六</span>
                            <span>周日</span>
                        </h3>
                        <ol>
                            <li class="normal">29</li>
                            <li class="normal">30</li>
                            <li>1</li>
                            <li>2</li>
                            <li>3
                            </li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                            <li>8</li>
                            <li>9</li>
                            <li>10</li>
                            <li>11</li>
                            <li>12</li>
                            <li>13</li>
                            <li>14</li>
                            <li>15</li>
                            <li>16</li>
                            <li>17</li>
                            <li>18</li>
                            <li>19</li>
                            <li>20</li>
                            <li>21
                                <img class="active" src="../../img/content/today1.gif" alt="今日活动"/>
                            </li>
                            <li>22</li>
                            <li>23</li>
                            <li>24</li>
                            <li>25
                                <img class="img" info="迟到的荣誉——啦啦啦，现在还写电商网站" src="../../img/content/today2.gif" alt=""/>
                            </li>
                            <li>26</li>
                            <li>27
                                <img class="img" info="这似乎是海参配燕窝，好味道~" src="../../img/content/hot_list_pic2.gif" alt=""/>
                            </li>
                            <li>28</li>
                            <li>29
                                <img class="img" info="气质美女，陪谁去过明天的情人节？" src="../../img/content/hot10.gif" alt=""/>
                            </li>
                            <li>30
                                <img class="img" info="帅哥是谁？陪谁去过情人节？" src="../../img/content/hot11.gif" alt=""/>
                            </li>
                            <li>31</li>

                            <li class="normal">1</li>
                            <li class="normal">2</li>
                            <li class="normal">3</li>
                            <li class="normal">4</li>
                            <li class="normal">5</li>
                            <li class="normal">6</li>
                            <li class="normal">7</li>
                            <li class="normal">8</li>
                            <li class="normal">9</li>
                        </ol>
                        <!--这是鼠标移动浮出层 可以用Js计算显示滴位置-->
                        <div class="today_info">
                            <img src="../../img/content/today2.gif" alt="">
                            <div class="text">
                                <span></span>
                                <h4><strong>本日主题</strong></h4>
                                <p>迟到的荣誉——啦啦啦，现在还写电商网站，呃好吧，没词儿了~~</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--</div> section fl-->

            <!--<div class="section fr">-->

            <div class="recommend">
                <h2 class="new_title">
                    <strong>RECOMMDNE</strong>
                    <span>精彩推荐</span>
                    <!--<em>2014.2</em>-->
                </h2>

                <div class="pic" id="fade">
                    <ul>
                        <li><a href="https://www.baidu.com/" target="_blank"><img src="../../img/content/img1.gif"></a></li>
                        <li><a href="https://www.baidu.com/" target="_blank"><img src="../../img/content/img2.gif"></a></li>
                        <li><a href="https://www.baidu.com/" target="_blank"><img src="../../img/content/img3.gif"></a></li>
                    </ul>
                    <ol>
                        <li class="active"><a href="javascript:;"><img src="../../img/content/img1.gif"></a></li>
                        <li><a href="javascript:;"><img src="../../img/content/img2.gif"></a></li>
                        <li><a href="javascript:;"><img src="../../img/content/img3.gif"></a></li>
                    </ol>
                    <p>爸爸去哪儿了</p>
                </div>


                <ul class="list">
                    <li>
                        <em><img src="../../img/content/recommend_list_ico1.gif"/> |</em>
                        <a href="http://www.miaov.com/2013">老店换新颜，丰泽园野重张亮相...</a>
                        <span>14/02/17</span>
                    </li>
                    <li>
                        <em><img src="../../img/content/recommend_list_ico2.gif"/> |</em>
                        <a href="http://www.miaov.com/2013">生活中哪些商品的包装有缺陷呢</a>
                        <span>14/02/17</span>
                    </li>
                    <li>
                        <em><img src="../../img/content/recommend_list_ico1.gif"/> |</em>
                        <a href="http://www.miaov.com/2013">老店换新颜，丰泽园野重张亮相...</a>
                        <span>14/02/17</span>
                    </li>
                    <li>
                        <em><img src="../../img/content/recommend_list_ico2.gif"/> |</em>
                        <a href="http://www.miaov.com/2013">生活中哪些商品的包装有缺陷呢</a>
                        <span>14/02/17</span>
                    </li>
                    <li>
                        <em><img src="../../img/content/recommend_list_ico1.gif"/> |</em>
                        <a href="http://www.miaov.com/2013">老店换新颜，丰泽园野重张亮相...</a>
                        <span>14/02/17</span>
                    </li>
                    <li>
                        <em><img src="../../img/content/recommend_list_ico2.gif"/> |</em>
                        <a href="http://www.miaov.com/2013">生活中哪些商品的包装有缺陷呢</a>
                        <span>14/02/17</span>
                    </li>
                    <li>
                        <em><img src="../../img/content/recommend_list_ico1.gif"/> |</em>
                        <a href="http://www.miaov.com/2013">老店换新颜，丰泽园野重张亮相...</a>
                        <span>14/02/17</span>
                    </li>
                    <li>
                        <em><img src="../../img/content/recommend_list_ico2.gif"/> |</em>
                        <a href="http://www.miaov.com/2013">生活中哪些商品的包装有缺陷呢</a>
                        <span>14/02/17</span>
                    </li>
                </ul>
            </div>
            <!--</div> section fr -->

        </div>


        <div class="main_wrap clear">
            <!--有浮动的地方父亲级就要清除浮动-->
            <div class="options fl">
                <ul class="nav tabNav2">
                    <li class="active fl"><strong>DT <span>地铁公交</span></strong>
                        <a href="javascript:;" class="triangle_down_red"></a>
                    </li>  <!--选项卡高亮状态-->
                    <li class="gradient fr"><strong>MAP <span>生活圈</span></strong>
                        <a href="javascript:;" class="triangle_down_red"></a>
                    </li>
                </ul>
                <div class="con">
                    <img class="tabCon2" src="../../img/content/123.gif"/>
                    <img class="tabCon2" src="../../img/content/456.jpg"/>
                </div>
            </div>
            <div class="section fr">
                <div class="bbs">
                    <h2 class="main_title"><strong>BBS</strong><span>论坛</span>
                        <a href="#" title="更多"><img src="../../img/more.gif" alt="更多"/></a>
                    </h2>
                    <ol >
                        <li class="active">
                            <strong>01</strong>
                            <img src="../../img/content/bbs_img1.gif">
                            <a href="#">保你没见过的古怪餐厅</a>
                            <span>阿瑞斯</span>
                            <em>ONE</em>
                            <b>世说新语</b>
                        </li>
                        <li>
                            <strong>01</strong>
                            <img src="../../img/content/bbs_img1.gif">
                            <a href="#">保你没见过的古怪餐厅</a>
                            <span>阿瑞斯</span>
                            <em>TWO</em>
                            <b>世说新语</b>
                        </li>
                        <li>
                            <strong>01</strong>
                            <img src="../../img/content/bbs_img1.gif">
                            <a href="#">保你没见过的古怪餐厅</a>
                            <span>阿瑞斯</span>
                            <em>THREE</em>
                            <b>世说新语</b>
                        </li>
                        <li>
                            <strong>01</strong>
                            <img src="../../img/content/bbs_img1.gif">
                            <a href="#">保你没见过的古怪餐厅</a>
                            <span>阿瑞斯</span>
                            <em>FOUR</em>
                            <b>世说新语</b>
                        </li>
                        <li>
                            <strong>01</strong>
                            <img src="../../img/content/bbs_img1.gif">
                            <a href="#">保你没见过的古怪餐厅</a>
                            <span>阿瑞斯</span>
                            <em>ONE</em>
                            <b>世说新语</b>
                        </li>
                        <li>
                            <strong>01</strong>
                            <img src="../../img/content/bbs_img1.gif">
                            <a href="#">保你没见过的古怪餐厅</a>
                            <span>阿瑞斯</span>
                            <em>ONE</em>
                            <b>世说新语</b>
                        </li>
                        <li>
                            <strong>01</strong>
                            <img src="../../img/content/bbs_img1.gif">
                            <a href="#">保你没见过的古怪餐厅</a>
                            <span>阿瑞斯</span>
                            <em>ONE</em>
                            <b>世说新语</b>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
        <div class="main_ad"><a href="#"><img src="../../img/ad/ad1.jpg"></a></div>
        <div class="main_wrap clear">
            <!--有浮动的地方父亲级就要清除浮动-->
            <div class="section fl clear">


                <h2 class="main_title"><strong>ZDFZ</strong><span>知道分子</span>
                    <a href="#" title="更多"><img src="../../img/more.gif" alt="更多"/></a>
                </h2>
                <div class="tab">
                    <ul>
                        <li class="active gradient">有人在问<a href="#"></a>
                            <a href="javascript:;" class="triangle_down_red"></a>
                        </li>
                        <li class="gradient">有人知道<a href="#"></a>
                            <a href="javascript:;" class="triangle_down_gray"></a>
                        </li>
                        <li class="gradient">热门问题<a href="#"></a>
                            <a href="javascript:;" class="triangle_down_gray"></a>
                        </li>
                    </ul>
                </div>

                <ul class="list_section">
                    <li class="title">
                        <span class="col1"><a href="#">标题</a></span>
                        <span class="col2"><a href="#">状态</a></span>
                    </li>
                    <li>
                        <span class="col1"><a href="#"><em>[<span>休闲</span>]</em>老北京一尊黄牛</a></span>
                        <span class="col2"><img src="../../img/ico1.gif"/></span>
                    </li>
                    <li>
                        <span class="col1"><a href="#"><em>[<span>美食</span>]</em>老北京一尊黄牛</a></span>
                        <span class="col2"><img src="../../img/ico2.gif"/></span>
                    </li>
                    <li>
                        <span class="col1"><a href="#"><em>[<span>购物</span>]</em>老北京一尊黄牛</a></span>
                        <span class="col2"><img src="../../img/ico1.gif"/></span>
                    </li>
                    <li>
                        <span class="col1"><a href="#"><em>[<span>休闲</span>]</em>老北京一尊黄牛</a></span>
                        <span class="col2"><img src="../../img/ico2.gif"/></span>
                    </li>
                </ul>
                <div class="soso">
                    <form action="#">
                        <strong>搜搜谁知道:</strong>
                        <input class="text" type="text">
                        <input class="btn" type="submit" value="">
                    </form>
                </div>
            </div>
            <div class="section fr">
                <h2 class="main_title"><strong>HRSK</strong><span>红人烧客</span>
                    <a href="#" title="更多"><img src="../../img/more.gif" alt="更多"/></a>
                </h2>
                <div class="hot_area">
                    <ul>
                        <li><img src="../../img/content/hot1.gif" alt=""></li>
                        <li><img src="../../img/content/hot2.gif" alt=""></li>
                        <li class="area1">
                            <p>
                                用户名：性感宝贝<br/>
                                区域：朝阳CBD<br/>
                                人气：124987
                            </p>
                            <img src="../../img/content/hot3.gif" alt="">
                        </li>
                        <li><img src="../../img/content/hot4.gif" alt=""></li>
                        <li><img src="../../img/content/hot5.gif" alt=""></li>
                        <li class="area2"><img src="../../img/content/hot6.gif" alt=""></li>
                        <li class="area2"><img src="../../img/content/hot7.gif" alt=""></li>
                        <li><img src="../../img/content/hot8.gif" alt=""></li>
                        <li><img src="../../img/content/hot9.gif" alt=""></li>
                        <li class="area2"><img src="../../img/content/hot10.gif" alt=""></li>
                        <li class="area2"><img src="../../img/content/hot11.gif" alt=""></li>
                    </ul>
                </div>
            </div>
        </div>


        <div class="main_wrap clear">
            <!--有浮动的地方父亲级就要清除浮动-->
            <div class="section fl">
                <div class="help">
                    <h2 class="main_title"><strong>ZXBZ</strong><span>在线帮助</span></h2>
                    <p>您有任何问题，都可以通过全国负费电话，或通过在线客服与我们联系！</p>
                    <ul>
                        <li class="phone fl">4006-100-516</li>
                        <li class="msn fr">100do.com@live.cn</li>
                    </ul>
                    <dl class="fl">
                        <dt>用户帮助</dt>
                        <dd><a href="http://www.miaov.com/2013">金币是什么</a></dd>
                        <dd><a href="http://www.miaov.com/2013">怎样查看我的等级</a></dd>
                        <dd><a href="http://www.miaov.com/2013">怎么赚积分</a></dd>
                    </dl>
                    <dl class="fr">
                        <dt>商户帮助</dt>
                        <dd><a href="http://www.miaov.com/2013">如何成为明星商户</a></dd>
                        <dd><a href="http://www.miaov.com/2013">邮件推广</a></dd>
                        <dd><a href="http://www.miaov.com/2013">论坛推广方法</a></dd>
                    </dl>
                </div>
            </div>
            <div class="section fr">
                <h2 class="main_title"><strong>HRSK</strong><span>媒体声音</span>
                    <a href="#" title="更多"><img src="../../img/more.gif" alt="更多"/></a>
                </h2>


                <ul class="media">
                    <li>
                        <a href="http://www.miaov.com/2013"><img src="../../img/content/media1.gif" alt="1"/></a>
                        <p>日本最大的财经杂志《钻石周刊》对100度享乐网的报道</p>
                    </li>
                    <li>
                        <a href="http://www.miaov.com/2013"><img src="../../img/content/media2.gif" alt="2"/></a>
                        <p>视频网站100度享乐网获得网络视听许可证</p>
                    </li>
                    <li>
                        <a href="http://www.miaov.com/2013"><img src="../../img/content/media3.gif" alt="3"/></a>
                        <p>互联网上的视频橱窗</p>
                    </li>
                    <li>
                        <a href="http://www.miaov.com/2013"><img src="../../img/content/media4.gif" alt="4"/></a>
                        <p>享乐主义的机会</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    <div class="side fr">

        <div class="login">
            <h2 class="gradient"><em>LOAD </em>登陆</h2>
            <div class="form">
                <form action="#">
                    <ul>
                        <li>
                            <span>用户名：</span>
                            <input class="text" type="text"/>
                            <label>
                                <input type="checkbox"/>
                                <strong>记住我</strong>
                            </label>
                        </li>
                        <li>
                            <span>密 码：</span>
                            <input class="text" type="password"/>
                            <input class="btn" type="submit" value="登陆"/>
                        </li>
                    </ul>
                </form>
            </div>
            <p>
                <a href="http://www.miaov.com/2013">新用户注册</a>
                <a href="http://www.miaov.com/2013">忘记密码了</a>
            </p>
        </div>

        <div class="ad_border"><a href="#"><img src="../../img/ad/ad2.jpg"></a></div>
        <div class="ad_border"><a href="#"><img src="../../img/ad/ad3.jpg"></a></div>

        <div class="side_section">
            <h2 class="main_title"><strong>LOGIN</strong><span>抢卷儿</span>
                <a href="#" title="更多"><img src="../../img/more.gif" alt="更多"/></a>
            </h2>
            <div class="wrap_section1">
                <div class="tab">
                    <ul>
                        <li class="active gradient">人气<a href="#"></a>
                            <a href="javascript:;" class="triangle_down_red"></a>
                        </li>
                        <li class="gradient">推荐<a href="#"></a>
                            <a href="javascript:;" class="triangle_down_gray"></a>
                        </li>
                        <li class="gradient">最新<a href="#"></a>
                            <a href="javascript:;" class="triangle_down_gray"></a>
                        </li>
                    </ul>
                </div>
                <ul class="list_section">
                    <li class="title">
                        <span class="col1"><a href="#">商店名</a></span>
                        <span class="col2"><a href="#">省</a></span>
                        <span class="col3"><a href="#">打印</a></span>
                    </li>
                    <li>
                        <span class="col1"><a href="#">老北京一尊黄牛</a></span>
                        <span class="col2"><a href="#">12%</a></span>
                        <span class="col3"><a href="#">345</a></span>
                    </li>
                    <li>
                        <span class="col1"><a href="#">老北京一尊黄牛</a></span>
                        <span class="col2"><a href="#">12%</a></span>
                        <span class="col3"><a href="#">345</a></span>
                    </li>
                    <li>
                        <span class="col1"><a href="#">老北京一尊黄牛</a></span>
                        <span class="col2"><a href="#">12%</a></span>
                        <span class="col3"><a href="#">345</a></span>
                    </li>
                    <li>
                        <span class="col1"><a href="#">老北京一尊黄牛</a></span>
                        <span class="col2"><a href="#">12%</a></span>
                        <span class="col3"><a href="#">345</a></span>
                    </li>
                    <li>
                        <span class="col1"><a href="#">老北京一尊黄牛</a></span>
                        <span class="col2"><a href="#">12%</a></span>
                        <span class="col3"><a href="#">345</a></span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="side_section">
            <h2 class="main_title"><strong>LOGIN</strong><span>今日推荐</span>
                <a href="#" title="更多"><img src="../../img/more.gif" alt="更多"/></a>
            </h2>
            <div class="wrap_section2">
                <ul class="pic_list">
                    <li>
                        <div class="img fl"><a href="#"><img src="../../img/content/pic1.gif" alt="内容图片"></a></div>
                        <div class="text fr">
                            <h3><a href="#">汉来国际美食百汇</a></h3>
                            <p>
                                口味：<a href="#">创意中餐</a><br/>
                                区域：<a href="#">朝阳/CBD</a><br/>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="img fl"><a href="#"><img src="../../img/content/pic1.gif" alt="内容图片"></a></div>
                        <div class="text fr">
                            <h3><a href="#">汉来国际美食百汇</a></h3>
                            <p>
                                口味：<a href="#">创意中餐</a><br/>
                                区域：<a href="#">朝阳/CBD</a><br/>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="img fl"><a href="#"><img src="../../img/content/pic1.gif" alt="内容图片"></a></div>
                        <div class="text fr">
                            <h3><a href="#">汉来国际美食百汇</a></h3>
                            <p>
                                口味：<a href="#">创意中餐</a><br/>
                                区域：<a href="#">朝阳/CBD</a><br/>
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="img fl"><a href="#"><img src="../../img/content/pic1.gif" alt="内容图片"></a></div>
                        <div class="text fr">
                            <h3><a href="#">汉来国际美食百汇</a></h3>
                            <p>
                                口味：<a href="#">创意中餐</a><br/>
                                区域：<a href="#">朝阳/CBD</a><br/>
                            </p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="side_section">
            <h2 class="main_title">
                <strong>360<sup>。</sup> SHOP <span>全景酒店</span></strong>
                <a href="#" title="更多"><img src="../../img/more.gif" alt="更多"/></a>
            </h2>
            <div class="panoramic">
                <a href="http://www.miaov.com/2013">
                    <img src="../../img/content/360.gif" alt=""/>
                    <span>CBD核心商圈尊崇典范</span>
                </a>
            </div>
        </div>

        <div class="side_section">
            <h2 class="main_title"><strong>LOGIN</strong><span>折扣店</span>
                <a href="#" title="更多"><img src="../../img/more.gif" alt="更多"/></a>
            </h2>
            <div class="wrap_section3">
                <ul class="pic_list">
                    <li>
                        <div class="img fl"><a href="#"><img src="../../img/content/pic1.gif" alt="内容图片"></a></div>
                        <div class="text fr">
                            <h3><a href="#">汉来国际美食百汇</a></h3>
                            <p>
                                口味：<a href="#">创意中餐</a><br/>
                                区域：<a href="#">朝阳/CBD</a><br/>
                            </p>
                        </div>
                    </li>
                </ul>
                <ul class="list_section">
                    <li><a href="#"><em>[<span>休闲</span>]</em>老北京一尊黄牛</a></li>
                    <li><a href="#"><em>[<span>美食</span>]</em>老北京一尊黄牛</a></li>
                    <li><a href="#"><em>[<span>美食</span>]</em>老北京一尊黄牛</a></li>
                    <li><a href="#"><em>[<span>休闲</span>]</em>老北京一尊黄牛</a></li>
                    <li><a href="#"><em>[<span>美食</span>]</em>老北京一尊黄牛</a></li>
                    <li><a href="#"><em>[<span>美食</span>]</em>老北京一尊黄牛</a></li>
                    <li><a href="#"><em>[<span>休闲</span>]</em>老北京一尊黄牛</a></li>
                    <li><a href="#"><em>[<span>美食</span>]</em>老北京一尊黄牛</a></li>
                </ul>
            </div>
        </div>

        <div class="side_section">
            <h2 class="main_title"><strong>LOGIN</strong><span>最新加盟</span>
                <a href="#" title="更多"><img src="../../img/more.gif" alt="更多"/></a>
            </h2>
            <div class="wrap_section4">
                <ul class="pic_list">
                    <li class="">
                        <div class="img"><a href="#"><img src="../../img/content/pic1.gif" alt="内容图片"></a></div>
                        <div class="text">
                            <h3><a href="#">汉来国际美食百汇</a></h3>
                            <p>
                                口味：<a href="#">创意中餐</a><br/>
                                区域：<a href="#">朝阳/CBD</a><br/>
                            </p>
                        </div>
                    </li>

                    <li class="">
                        <div class="img"><a href="#"><img src="../../img/content/pic1.gif" alt="内容图片"></a></div>
                        <div class="text">
                            <h3><a href="#">汉来国际美食百汇</a></h3>
                            <p>
                                口味：<a href="#">创意中餐</a><br/>
                                区域：<a href="#">朝阳/CBD</a><br/>
                            </p>
                        </div>
                    </li>
                </ul>
                <ul class="list_section">
                    <li><a href="#"><em>[<span>休闲</span>]</em>老北京一尊黄牛</a></li>
                    <li><a href="#"><em>[<span>美食</span>]</em>老北京一尊黄牛</a></li>
                    <li><a href="#"><em>[<span>美食</span>]</em>老北京一尊黄牛</a></li>
                    <li><a href="#"><em>[<span>休闲</span>]</em>老北京一尊黄牛</a></li>
                    <li><a href="#"><em>[<span>美食</span>]</em>老北京一尊黄牛</a></li>
                    <li><a href="#"><em>[<span>美食</span>]</em>老北京一尊黄牛</a></li>
                </ul>

            </div>
        </div>
    </div>


</div>


<div id="footer">
    <a href="http://www.miaov.com/2013">关于我们</a> |
    <a href="http://www.miaov.com/2013">联系我们</a> |
    <a href="http://www.miaov.com/2013">版权声明</a> |
    <a href="http://www.miaov.com/2013">加入我们</a> |
    <a href="http://www.miaov.com/2013">问题反馈</a> |
    <a href="http://www.miaov.com/2013">友情链接</a> |
    <a href="http://www.miaov.com/2013">网站地图</a> |
    <a href="http://www.miaov.com/2013">视频索引</a><br/>
    Copyright &copy; 2008 www.100du.com 100度享乐网 版权所有 <span>京ICP证0843234号</span>

</div>

</body>
</html>